<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
        }
        li{
            list-style:none;
            margin-bottom: 5px;
            display: flex;
            line-height: 27px;
            word-break: break-all;
            /* display: inline-block; */
        }
        img{
            width: 30px;
            height: 30px;
        }
        #Box{
            width: 260px;
            height: 500px;
            border: 1px solid #cccccc;
            border-radius: 20px;
            
            box-shadow: 0px 1.5px 10px 2px #cccccc;
            background: #F8F8F8;
            position: fixed;
            left: 0px;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
        #bottom{
            width: 260px;
            height: 40px;
            position: absolute;
            bottom: 0;
            border-radius:0 0 20px 20px;
        }
        #bottom>div{
            width: 35px;
            height: 35px;
            border-radius: 90px;
            border: 1px solid #000000;
            margin: 1px auto;
            cursor: pointer;
            transition: all 0.2s;
        }
        #title{
            width: 100%;
            height: 40px;
            border-radius:20px 20px 0 0; 
            position: relative;
        }
        #title .yaun{
            width: 6px;
            height: 6px;
            border-radius:90px;
            background: #A7A7A7;
            position: absolute;
            top: 20px;
            left: 85px;
            box-shadow: #cccccc 0px 1px 5px 1px inset;
            border: 1px solid #66677C;
        }
        #title .chan{
            width:65px;
            height: 6px;
            border-radius: 10px;
            background: #A7A7A7;
            position: absolute;
            top: 20px;
            left: 110px;
            box-shadow: #cccccc 0px 1px 5px 1px inset;
            border: 1px solid #66677C;
        }
        #title .shexiangtou{
            width: 5px;
            height: 5px;
            background: #A7A7A7;
            border-radius: 90px;
            position: absolute;
            top: 5px;
            left: 140px;
            box-shadow: #cccccc 0px 1px 5px 1px inset;
            border: 1px solid #66677C;
        }
        #content{
            width: 95%;
            height: 410px;
            border: 1px solid #000;
            margin: 0 auto;
            background: #000000;
            background-size: 100% 100%;
        }
        #content_title{
            width: 248px;
            height: 30px;
            background: #000000;
            color: #fff;
            display: flex;
            align-items: center;
            font-size: 13px;
            line-height: 5px;
            position: fixed;
            visibility: hidden;
        }
        #dibu{
            width: 247px;
            height: 30px;
            background: #fff;
            top:487px;
            display: flex;
            align-items: center;
            visibility: hidden;
        }
        #subject{
            width: 100%;
            height: 350px;
            margin-top: 30px;
            color: #fff;
            font-size: 13px;
            overflow-y: auto;
            overflow-x: hidden;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="Box">
        <div id="title">
            <div class="shexiangtou"></div>
            <div class="yaun"></div>
            <div class="chan"></div>
        </div>
        <div id="content">
            <div id="content_title">
                <span style="margin-left: 5px;"><img src="返回.png" alt="" style="width: 15px;height: 12px;cursor: pointer;"></span>
                <span style="font-family: cursive; margin-left: 5px; height: 20px;line-height: 20px;cursor: pointer;" class="mingzi">雪宁</span>
                <span style="margin-left: 160px;"><img src="more.png" alt="" style="width: 25px;height: 20px;cursor: pointer;"></span>
            </div>
            <div id="subject"></div>
            <div id="dibu">
                <img src="喇叭.png" style="cursor: pointer;margin-left: 3px;" alt="" width="20px" height="20px">
                <input type="text" value="" class="Input" style="width: 165px; height: 20px;outline: none;border: none;border-bottom: 1px solid #A7A7A7;margin-left: 3px;">
                <input type="button" value="发送" class="fasong"  style=" width: 40px;height:26px;margin-left: 4px;cursor: pointer;background: rgb(7, 167, 7);border: none;border-radius: 3px;outline: none;color: #fff;font-size: 12px;">
            </div>
        </div>
        <div id="bottom">
            <div class="home"></div>
        </div>
    </div>
</body>
<script>
	//功能：用户名变换
		// 获取操作元素
        var monicker = document.getElementsByClassName("mingzi")[0];
        monicker.onclick = function(){
            if(monicker.innerHTML == "雪宁"){
                monicker.innerHTML = "小余";
            }else{
                monicker.innerHTML = "雪宁";
            }
        }

	//功能：点击发送按钮发送信息
        //获取操作元素
        var send = document.getElementsByClassName("fasong")[0];
        var Input = document.getElementsByClassName("Input")[0];
        var subject = document.getElementById("subject");
        // 创建一个数组，该数组用来存储用户头像路径
        var arr = ["头像1.jpg","头像2.jpg"];
        // 发送按钮点击事件
    	send.onclick = function(){
            //判断输入框是否为空，如果为空不执行代码块内的代码，为了避免创建空元素
            if(Input.value !=""){
            	// 每次点击发送后，创建一个li元素
	            var li = document.createElement("li");
	            // 将创建到的li元素添加到指定已存在的元素中
	            subject.appendChild(li);//按顺序从前往后添加
	            //功能：不同名字不同样式
	            if(monicker.innerHTML == "雪宁"){
	            	// 创建一个img标签，用来存放用户头像，且于内容拼接
	                var Img = document.createElement("img"); 
	                li.style.backgroundColor = "pink";
	                Img.src = arr[0];
	                li.appendChild(Img);
	            }else{
	                var Img = document.createElement("img"); 
	                li.style.backgroundColor = "rgb(7, 167, 7)";
	                li.style.justifyContent = " flex-end";
	                Img.src = arr[1];
	                li.appendChild(Img);
	                Img.style.order = "5";
	            }
	            //点击发送，将输入框的内容赋值给div中的html内容
	            if(Input.value != ""){
	        		li.innerHTML += Input.value;
	        	}else{
	        		send.style.direction = "down";
	        	}
	            //每次点击发送后跟着清空输入框中的内容
	            Input.value = "";
	        }
    	}
   
	//Home键功能
    	//获取所需操作的元素
    	var Home = document.getElementsByClassName("home")[0];
        var Content = document.getElementById("content");
        var dibu = document.getElementById("dibu");
        var content_title = document.getElementById("content_title");
        //定义一个目标值，判断Home键的状态
        var HomeIndex = 0;
		var timer1 = null;
		var timer2 = null;
		
		//Home开机点击事件
    	Home.onclick = function(){
    		//清除关机的定时器，因为操作着同一个元素，但定时器不一样，执行的代码也不一样，所以要给当前的定时器清楚之前另一个的定时器
    		window.clearInterval(timer2);
    		HomeIndex++;
    		if(HomeIndex == 1){//等于1 则可继续进行一下代码，否则不做任何操作。为了避免反反复复开机
	        	//开机定时器
	        	Content.style.backgroundImage = "url(华为开机动画.gif)";
				timer1= window.setInterval(function(){
					Content.style.backgroundImage = "url(./timg2.jpg)";
					dibu.style.visibility = "inherit";
		        	content_title.style.visibility = "inherit";
		        	subject.style.visibility = "inherit";
				},4000);
    		}
        }
		//Home关机点击事件 = =有Bug 未修复 会造成无限循环关机
    	Home.ondblclick = function(){
    		//清除开机的定时器，因为操作着同一个元素，但定时器不一样，执行的代码也不一样，所以要给当前的定时器清楚之前另一个的定时器
    		window.clearTimeout(timer1);
			Content.style.backgroundImage = "url(华为关机动画.gif)";
    		dibu.style.visibility = "hidden";
        	content_title.style.visibility = "hidden";
        	subject.style.visibility = "hidden";
        	//关机定时器
        	timer2=window.setInterval(function(){
        		Content.style.backgroundImage = "none";
        	},3000);
        	//每次关机后清空subject中的所有内容，避免下次开机依然保留上次的内容
        	subject.innerHTML = "";
        	HomeIndex=0;
    	}
        //Home键添加移入的效果~
        Home.onmouseover = function(){
        	Home.style.boxShadow = "darkgrey 0px 1px 5px 1px inset";
        }
        //Home键添加移出的效果~
        Home.onmouseout = function(){
        	Home.style.boxShadow = "none";
        }
          
</script>
</html>